<template>
    <div>
        <div @click="showModal = true" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <Api1/>
            </n-icon>
<!--            <Handle id="Api-export" type="source" :position="Position.Right"-->
<!--                    :is-valid-connection="props.isValidTargetPos"/>-->
        </div>
        <span>API接口</span>
<!--        <flow-popup-window-->
<!--            :show="popup.show"-->
<!--            :on-click-outside="popup.clickPopupOutside"-->
<!--            :x="popup.x"-->
<!--            :y="popup.y"-->
<!--        >-->
<!--            <n-card title="API接口">-->
<!--              <p>API名称</p>-->
<!--              <n-select-->
<!--                  placeholder="API名称"-->
<!--                  v-model:value="value"-->
<!--                  :options="props.data.data"-->
<!--                  label-field="name"-->
<!--                  value-field="id"-->
<!--                  @update:value="popup.reopen"-->
<!--              />-->
<!--            </n-card>-->
<!--        </flow-popup-window>-->
      <n-modal v-model:show="showModal">
        <n-card
            style="width: 1200px"
            title="API采集器"
            :bordered="false"
            size="huge"
            role="dialog"
            aria-modal="true"
        >
          <template #header-extra>

          </template>
          <img style="width: 100%;" src="@/assets/student/image/img.png" alt="">
          <template #footer>
            <a ref="dowA" :href="dowUrl" download></a>
            <n-button @click="saveApi">发送请求并下载响应体</n-button>
          </template>
        </n-card>
      </n-modal>
    </div>
</template>

<script setup>
import {Api1} from "@vicons/carbon"
// import {Handle, Position} from "@vue-flow/core";
// import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";
// import {useRoute} from "vue-router";
// import workApi from "@/http/workApi";
import {NButton} from "naive-ui";
import {STATIC} from "@/assets/server";

//
// const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'data'])
// const route = useRoute()
//
// // 点击弹窗
// const popup = reactive({
//     show: false,
//     x: null,
//     y: null,
//     clickPopupOutside: () => {
//         popup.closedPopup()
//     },
//     openPopup: (e) => {
//         popup.x = e.x
//         popup.y = e.y
//         popup.show = true
//     },
//     closedPopup: () => {
//         popup.show = false
//     },
//   reopen: () => {
//     popup.show = true
//   }
// })
// const value = ref(null)
// workApi.get("perform_tasks/get_api", {
//   params: {
//     task_id: route.query.taskId
//   }
// }).then(r => {
//   props.data.data = r.data
// })

const showModal = ref(false)
const dowA = ref(null)
const dowUrl = ref("")
const saveApi = () => {
  dowUrl.value = STATIC+"download/api/api.json"
  // dowUrl.value = "http://t.weather.itboy.net/api/weather/city/101280601"
  console.log(dowA.value)
  setTimeout(() => {
    dowA.value.click()
  }, 1)
}

</script>

<style scoped lang="less">
.n-card {
    width: 400px;
}
</style>